<script lang="ts" setup>
import type { User } from '#/api/system/user/model';

import { onMounted, ref } from 'vue';

import { Select } from 'ant-design-vue';

import { userListAll } from '#/api/system/user';

interface Props {
  mode?: 'multiple' | 'tags' | undefined;
}

const props = withDefaults(defineProps<Props>(), {
  mode: undefined,
});

const emit = defineEmits(['blur', 'change']);
const selectMode = ref(props.mode);
const isLoaded = ref(false);
const userList = ref<User[]>([]);
const selected = defineModel<number | string>({
  default: () => undefined,
});

onMounted(async () => {
  if (!isLoaded.value) {
    const list = await userListAll();
    userList.value = list || [];
    isLoaded.value = true;
  }
});

function onChange() {
  emit('change', selected.value);
}
</script>
<template>
  <Select
    v-model:value="selected"
    class="w-full"
    placeholder="请选择"
    allow-clear
    show-search
    :mode="selectMode"
    :class="{ 'valid-success': !!selected }"
    :options="userList"
    option-filter-prop="nickName"
    :field-names="{ label: 'nickName', value: 'userId' }"
    @blur="emit('blur')"
    @change="onChange"
  />
</template>
